<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>子组件传值给父组件</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        input, select {
            height: 30px;
        }
    </style>
  </head>
  <body>
    <template id="confirm">
      <div>
        <input type="text" v-model="val">
        <button type="button" @click="handleClick">确定</button>
      </div>
    </template>

    <div id="app">
        <child value="datas to parent" @msg-from-child="getMsgFromChild"></child>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.6/vue.min.js"></script>
    <script>
        Vue.component('child', {
            data: function () {
                return {
                    val: this.value
                }
            },
            props: ['value'],
            methods: {
                handleClick () {
                    this.$emit('msg-from-child', this.val)
                }
            },
            template: '#confirm'
        })
        new Vue ({
            el: '#app',
            data: {

            },
            methods: {
                getMsgFromChild (v) {
                    alert('msg: ' + v)
                }
            }
        })
    </script>
  </body>
</html>
